/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import * as React from "react";
import {Dialog, DialogClose, DialogContent, DialogDescription, DialogHeading} from "./Dialog";
import { Button, ButtonIntent } from "./Button";
import { useTheme } from "./Theme/Providers";
import { Text } from "./Text";
// import { useUid } from "./Hooks/use-uid";

export interface AlertDialogProps {
  isOpen: boolean;
  onConfirm: () => void;
  onCancel?: () => void;
  onClose: () => void;
  title: string;
  subtitle?: string;
  confirmLabel?: string;
  intent?: ButtonIntent;
}

//确认进一步的操作的对话框。
export const AlertDialog= ({
  isOpen,
  title,
  subtitle,
  confirmLabel = "Confirm",
  onConfirm,
  intent = "danger",
  onCancel,
  onClose
}:AlertDialogProps) => {
  const theme = useTheme();
  // const id = useUid();

  const cancel = React.useCallback(() => {
    if (onCancel) onCancel();
    onClose();
  }, [onCancel, onClose]);

  const confirm = React.useCallback(() => {
    onConfirm();
    onClose();
  }, [onConfirm]);

  return (
      <Dialog open={isOpen} onOpenChange={cancel}>
        <DialogContent >
          <DialogHeading>
            {title}
          </DialogHeading>
          <DialogDescription>
            <div css={{ padding: "1.5rem" }}>
              {subtitle && <Text>{subtitle}</Text>}
              <div
                  css={{
                    marginTop: theme.spaces.md,
                    display: "flex",
                    justifyContent: "flex-end"
                  }}
              >

                <Button
                    onPress={confirm}
                    css={{ marginLeft: theme.spaces.sm }}
                    intent={intent}
                >
                  {confirmLabel}
                </Button>
              </div>
            </div>
          </DialogDescription>
          <DialogClose css={{ padding: theme.spaces.xs }}>
            取消
          </DialogClose>
        </DialogContent>
      </Dialog>
  );
};
